<template>
    <div class="head">
        <span class="left" @click="left">{{leftText}}</span>
        <span class="title">{{title}}</span>
        <span class="right" @click="right">{{rightText}}</span>
    </div>
</template>
<script>
export default {
    props:{
      title: String,
      leftText: String,
      rightText: String
    },
    methods: {
        right(){
          this.$emit('click-right');
        },
        left(){
          this.$emit('click-left');
        }
    },
}
</script>
<style lang="scss" scoped>
    .head{
        height: 45px;
        display: flex;
        align-items: center;
        background: red;
        justify-content: space-between;
        color: #fff;
        padding: 0 10px;
    }
</style>
